import React, { useState } from 'react';
import styles from './EncryptedDoc.module.css';

interface EncryptedDocProps {
  children: React.ReactNode;
  password: string; // 这里可以是解密后的密码
}

const EncryptedDoc: React.FC<EncryptedDocProps> = ({ children, password }) => {
  const [inputPassword, setInputPassword] = useState('');
  const [isUnlocked, setIsUnlocked] = useState(false);
  const [error, setError] = useState('');

  const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputPassword(e.target.value);
  };

  const handleUnlock = () => {
    if (inputPassword === password) {
      setIsUnlocked(true);
      setError('');
    } else {
      setError('密码错误，请重试。');
    }
  };

  return (
    <div className={styles.container}>
      {!isUnlocked ? (
        <div>
          <h2>请输入密码以访问文档</h2>
          <input
            type="password"
            value={inputPassword}
            onChange={handlePasswordChange}
            placeholder="输入密码"
          />
          <button onClick={handleUnlock}>解锁</button>
          {error && <p className={styles.error}>{error}</p>}
        </div>
      ) : (
        <div>{children}</div>
      )}
    </div>
  );
};

export default EncryptedDoc; 